<template>
<div class="main">
     <el-dialog
        :title=" operateType"
        :visible.sync="isShow"
        width="500px"
        >
              <common-form
              :formLabel="operateFormlabel"
              :form="operateForm"
              :inline="true"
              ref="form"
              >
              <template v-if="operateType==='修改帖子' ||operateType==='评论帖子'">
                <br>
                <div class="pictureupload">
                  <p style="display:inline-block;margin-left:33px;margin-right:20px;">帖子图片</p> 
                  <input type="file" v-show="false" ref="file" @change="uploadfile" accept="image/*" multiple="multiple">
                  <el-button  @click="$refs.file.click()">选择图片</el-button>     
                  <br>
                  <img   :src="val" v-for="(val,index) in File1.imgSrc" :key="index" width="50px" height="50px" style="margin-left:10px;margin-top:10px;">                 
                </div>
              </template>
              </common-form>
             <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="isShow = false">取消</el-button>
                <el-button size="medium" type="primary" @click="confirm">确定</el-button>
              </div>
      </el-dialog>
        <!-- 显示图片 -->
        <el-dialog
        title="图片"
        :visible.sync="imgshow"
        width="600px"
        >
            <img  :src="bigimg" style="" width="500px" >
      </el-dialog>
    <h2 class="title">店铺动态</h2>
    <p class="title-p">发表日常</p>
    <div class="dynamic">
       <div class="publish-box">
            <div class="input-text"  ref="text" contenteditable="true">
            </div>
            <div class="picture-hidden" >
                <p >图片</p>
                <div class="picture" v-for="(val,index) in File.imgSrc" :key="index">
                    <img @click="getImgsrc" :src="val" width="150px" height="150px">
                </div>
            </div>
            <input type="file" name="file" style="display:none;" ref="picture" @change="addpic" multiple="multiple" />
            <div class="pulish">
                <el-button style="margin-left:10px;" @click="$refs.picture.click()"><i class="el-icon-picture-outline"></i>添加照片</el-button>
                <el-button @click="publish">发表</el-button>
            </div>
       </div>
       <div class="dynamic-box" v-for="val,index in forumdata" :key="index">
           <div class="shophead">
                <div class="img">
                        <img @click="getImgsrc" :src="val.userAvatar" alt="" width="70px" height="70px" style=" border-radius:50%;">
                </div>
                <div class="shopinfo">
                        <h3>{{val.userName}}</h3>
                        <p>{{val.forumTime}}</p>
                </div>
           </div>
           <div class="dynamic-p">
               <p>{{val.forumContent}}</p>
           </div>
           <div class="dynamic-img">
                <img @click="getImgsrc" :src="url"  v-for="url in val.image" :key="url">
           </div>
           <div class="dynamic-method">
               <span @click="edit(val)">修改</span>
               <span>点赞({{val.forumLike}})</span>
               <span @click="del(val.forumId)">删除</span>
           </div>
           
            <!-- <p class="com" @click="commentforum(val)">评论</p> -->
            <p class="look">浏览量:{{val.forumVisit}}</p>
         <comment :forum="val"></comment>
       </div>
       

    </div>
</div>
</template>

<script>
import {updateforum,commentForum,publishForum,deleteForum,getForumdata} from '../../../api/personalData/shop/dynamic'
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
import comment from '@/components/ly/comment'
import CommonForm from '@/components/ly/Common/CommonForm'
export default {
    name:'ShopDynamic',
    components:{comment,CommonForm},
  data() {
      return {
          userid:'',
        userinfo:"",
        bigimg:'#',
        imgshow:false,
        File:{
            imgSrc:'',
            files:''
        },
        File1:{
            imgSrc:'',
            files:''
        },
        operateType:'add',
        isShow:false,
        operateFormlabel:[],
        operateForm:{},
        forumdata:[]
      }
  },
    methods:{
        // 图片放大
         getImgsrc(e){
          this.imgshow = true
          this.bigimg = e.target.src
      },
        // 确认
        confirm(){
            if(this.operateType==='修改帖子'){
                const formdata = new FormData();
                for(let i = 0 ;i<this.File1.files.length;i++){
                    formdata.append("files", this.File1.files[i]);
                }
                updateforum(this.operateForm,formdata).then(data=>{
                    const list = data.data.message
                    console.log(list);
                    if(list === '成功'){
                        this.$message({
                                type: "success",
                                message: "修改成功!"
                            })
                            this.isShow = false
                            this.File1.imgSrc=''
                            this.File1.files=''
                            console.log(data);
                            this.getForum();
                    }
                })
            }
            else if(this.operateType === '评论帖子'){
                    const formdata = new FormData();
                    for(let i = 0 ;i<this.File1.files.length;i++){
                        formdata.append("files", this.File1.files[i]);
                    }
                    commentForum(this.operateForm,formdata).then(data=>{
                        const list = data.data.message
                        console.log(list);
                        if(list === '成功'){
                            this.$message({
                                    type: "success",
                                    message: "评论成功!"
                                })
                                this.isShow =false
                                this.File1.imgSrc=''
                                this.File1.files=''
                                console.log(data);
                                this.getForum();
                        }
                    })
            }
        },
        // 修改
        uploadfile(e){
            let fs = e.target.files
            this.File1.files =fs
            console.log(this.File1.files);
            let imgs=[]
            for(let i = 0 ;i<fs.length;i++){
                const src = window.URL.createObjectURL(fs[i])
                imgs[i]=src
            }
           this.File1.imgSrc = imgs
           console.log(this.File1.imgSrc);
        },
        // 添加图片
        addpic(e){
            let fs = e.target.files
            this.File.files =fs
            console.log(this.File.files);
            let imgs=[]
            for(let i = 0 ;i<fs.length;i++){
                const src = window.URL.createObjectURL(fs[i])
                imgs[i]=src
            }
           this.File.imgSrc = imgs
           console.log(this.File.imgSrc);
        },
    //    closepicture(){

    //    },
    // 发表
       publish(){
         const formdata = new FormData();
          for(let i = 0 ;i<this.File.files.length;i++){
              formdata.append("files", this.File.files[i]);
          }
            const text = this.$refs.text.innerHTML;
            publishForum({
                  userId:this.userid,
                  shopId:2,
                  forumContent:text,
                },formdata).then(data=>{
                    const list = data.data.message
                        if(list === '成功'){
                            this.$message({
                                    type: "success",
                                    message: "发布成功!"
                                })
                                this.$refs.text.innerHTML=''
                                this.File.imgSrc=''
                                this.File.files=''
                                console.log(data);
                                this.getForum();
                        }
                })
       },
    //    修改
       edit(val){
            console.log(val);
            this.isShow = true
            this.operateType = '修改帖子'
            this.operateForm = {
                forumId:val.forumId ,
                forumContent:val.forumContent ,
                userId:this.userid ,
            }
            this.operateFormlabel=[  
            {
                model:'forumContent',
                label:'帖子内容',
                type:'input',
                display:''
            },
            ]
           this.File1.imgSrc = val.image
       },
    //    删除
       del(forumId){
           this.$confirm("此操作将永久删除数据,是否继续?",'提示',{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
         }).then(() => {
             deleteForum({  
                  userId:this.userid,
                  forumId:forumId
                }).then(data=>{
                    const list = data.data.message
                    if(list ==='成功'){
                    this.$message({
                                type: "success",
                                message: "删除成功!"
                            })
                    this.getForum();
                    }
                })
          })
       },
    //    获取数据
       getForum(){
           const user = jwtDecode(cookie.getToken());
           this.userid = user.userId
           getForumdata({shopId:2}).then(data=>{
                const list = data.data.data
                this.forumdata = list 
                console.log(this.forumdata);
             
           })
       },
    },
    created(){
        this.getForum();
    }
   

}
</script>

<style lang="less" scoped>

 .main {
        margin-top: 20px;
        width: 100%;
        border-radius: 4px;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        position: relative;
        .title{
            display: inline-block;
            padding: 20px;
            font-weight: 400;
        }
        .title-p{
            display: inline-block;
            padding: 10px;
            color: rgb(167, 167, 167);
        }
        .dynamic{
             box-sizing: border-box;
            padding: 20px;
            width: 100%;
            .publish-box{
                border-bottom: 1px solid rgb(204, 202, 202) ;
                padding: 20px;
                box-sizing: border-box;
                width: 100%;
                .input-text{
                    display: inline-block;
                    margin-left: 20px;
                    width: 90%;
                    height: 100px;
                    padding: 10px;
                    box-sizing: border-box;
                    border: 1px solid #e5e5e5;
                    outline:none;
                    position: relative;
                }
                .picture-hidden{
                     margin-left: 20px;
                     width: 90%;
                    // height: 150px;
                    padding: 10px;
                    box-sizing: border-box;
                    border: 1px solid #e5e5e5;
                    outline:none;
                    position: relative;
                    p{
                        color: rgb(158, 158, 158);
                    }
                    .picture{
                        margin-left: 5px;
                        display: inline-block;
                        margin-top: 10px;
                        position: relative;
                         .close{
                        position: absolute;
                        top: 0px;
                        right: 1px;
                        cursor: pointer;
                    }
                    }
                }
                .pulish{
                    display: flex;
                    justify-content: right;
                    margin-right: 52px;
                    padding: 10px;
                    box-sizing: border-box;
                }
            }
            .dynamic-box{
                background-color: #ffffff;
                padding: 10px;
                box-sizing: border-box;
                margin-top: 20px;
                width: 100%;
                border-bottom: 1px solid #e5e5e5 ;
                // height: 200px;
                // background-color: aqua;
                .shophead{
                    display: flex;
                    justify-content: left;
                    align-items: center;
                .shopinfo{
                    margin-left: 20px;
                    display: inline-block;
                    h3{
                        font-weight: 400;
                    }
                    p{
                        margin-top: 2px;
                        font-weight: 400;
                        color: rgb(180, 180, 180);
                    }
                }
                }
                .dynamic-p{
                    margin: 0 auto;
                    width: 80%;
                    margin-top: 10px;
                    font-size: 16px;
                    text-indent: 2em;
                }
                .dynamic-img{
                    width: 90%;
                    margin: 20px auto;
                    img{
                        display: inline-block;
                        width: 200px;
                        height: 200px;
                        margin: 20px;
                    }
                }
                .dynamic-method{
                    width: 90%;
                    margin: 0 auto;
                    text-align: right;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #727272;
                    span{
                        margin: 20px;
                        &:hover{
                            color: rgb(77, 174, 253);
                            cursor: pointer;
                        }
                    }
                }
                .look{
                    display: inline-block;
                    float: right;
                    color: rgb(158, 158, 158);
                    padding: 20px;
                    margin-right: 80px;
                    text-align: right;
                }
            }
        }
      }
</style>